<template>
  <!-- 新闻页的卡片样式 -->
  <div
    :class="hasShadow"
    @mouseleave="delShadow"
    @mouseenter="addShadow"
    class="cardStyle"
  >
    <img
      @click="
        () => {
          jumpDetail(title.aid);
        }
      "
      :src="require(`../../assets/imgs/cl/${title.img}`)"
      alt
    />
    <p
      @click="
        () => {
          jumpDetail(title.aid);
        }
      "
      class="title"
    >
      {{ title.title }}
    </p>
    <p class="text">
      {{ title.introduce }}
    </p>
    <MyTime
      :time="title.publishTime.slice(0, title.publishTime.indexOf('T'))"
      class="timeStyle"
    />
  </div>
</template>
<script>
import MyTime from "./TimeStyle";
export default {
  name: "NewsCard",
  props: ["title"],
  data() {
    return {
      hasShadow: {
        boxShadow: false,
      },
    };
  },
  components: {
    MyTime,
  },
  methods: {
    jumpDetail(aid) {
      console.log(aid);
      this.$router.push(`/pc/scienceAticle?article_id=${aid}`);
    },
    addShadow() {
      this.hasShadow.boxShadow = true;
    },
    delShadow() {
      this.hasShadow.boxShadow = false;
    },
  },
};
</script>
<style scoped>
img {
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
  height: 150px;
}
.timeStyle {
  margin-left: 10px;
  margin-bottom: 5px;
}
.text {
  padding: 5px;
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  text-align: left;
}
.title {
  font-weight: bold;
  margin-top: 10px;

  cursor: pointer;

  text-align: center;
}
.title:hover {
  color: cornflowerblue;
}
.cardStyle {
  width: 250px;
  border-radius: 5px;
  background-color: #fff;
  margin-top: 20px;
  text-align: center;
}
.boxShadow {
  box-shadow: 0px 0px 5px 1px #aaa;
  margin-top: 18px;
  margin-bottom: 2px;
}
</style>
